<template>
	<el-dialog title="导出计划表" :visible.sync="planVisible" @close="close" width="80%" class="planDialog" :show-close='false' :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">
		  	导出计划表
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<el-row>
			请选择：
			<el-select v-model="queryData.year" placeholder="请选择" size="mini" @change="exportPlan">
				<el-option v-for="(i,index) in 4" :key="i" :label="(new Date()).getFullYear()+index" :value="(new Date()).getFullYear()+index + ''">
				</el-option>
			</el-select>
			<el-select v-model="queryData.maintainType" placeholder="请选择" size="mini" @change="exportPlan">
				<el-option v-for="i in modeArr" :key="i.value" :label="i.name" :value="i.value">
				</el-option>
			</el-select>
			计划表
		</el-row>
		<el-row style="margin-top:10px;height:calc(100% - 40px)">
			<el-table :data="planData" size="mini" style="width: 100%;height:100%;" class="tableCon">
				<el-table-column label="序号" min-width="50px" fixed>
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column fixed prop="equipmentName" show-overflow-tooltip label="仪器名称" min-width="150">
				</el-table-column>
				<el-table-column prop="model" show-overflow-tooltip label="规格型号 " min-width="120">
				</el-table-column>
				<el-table-column prop="enterCode" show-overflow-tooltip label="设备编号" min-width="120">
				</el-table-column>

				<el-table-column prop="nextDate" show-overflow-tooltip label="计划执行日期" min-width="120">
					<template slot-scope="scope">
						{{scope.row.hasOwnProperty('nextDate')?scope.row.nextDate.split(' ')[0]:'/'}}
					</template>
				</el-table-column>
				<el-table-column prop="leaderName" show-overflow-tooltip label="负责人" width="120">
				</el-table-column>

			</el-table>
		</el-row>

		<span slot="footer" class="dialog-footer">
	  	 <el-button type="primary" @click="planExport" size="mini">导出</el-button>
	    	<el-button @click="close" size="mini">取 消</el-button>
	  </span>
	</el-dialog>
</template>

<script>
	import { mapState } from 'vuex'
	export default {
		name: 'plan-grid',
		props: {
			planDialogShow: Boolean,
			queryData: Object,
			planData: Array
		},
		data() {
			return {
				modeArr: [{
					name: '仪器保养',
					value: 'MA01'
				},{
					name: '检定校准',
					value: 'MA02'
				},
				{
					name: '期间核查',
					value: 'MA03'
				}],
			}
		},
		created() {

		},
		mounted() {

		},
		computed: {
			...mapState(['tableHeightF']),
			planVisible: {
				get() {
					return this.planDialogShow;
				},
				set() {

				}
			}
		},
		methods: {
			exportPlan() {
				this.$parent.exportPlan()
			},
			planExport() {
        let token = sessionStorage.getItem('loginAccount')?sessionStorage.getItem('loginAccount'):undefined
				let url = 'resource/planExport.htm?maintainType=' + this.queryData.maintainType + '&year=' + this.queryData.year + "&token=" + token
				window.open(process.env.baseUrl + url );
				this.close()
			},
			close() {
				this.$emit('update:planDialogShow', false)
        this.$parent.queryData = {
          maintainType: 'MA02',
          year: new Date().getFullYear() + ''
        }
			}
		}
	}

</script>

<style>
	.planDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.planDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 15px;
	}
</style>
